<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.0.0-beta3/css/bootstrap.min.css">
    <!-- <link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap-vue/2.21.2/bootstrap-vue.min.css"> -->

    <style>
        body {
            padding: 0 1em;
            font-family: Arial, sans-serif;
        }

        main {
            background-color: #FFFFFF;
        }

        p {
            text-indent: 4em;
            line-height: 1.5em;
        }

        h2 {
            margin: .5em 0;
            font-size: 24px;
        }

        label {
            font-weight: bolder;
            text-align: right;
        }

        .ipt-text {
            border: none;
            border-bottom: 1px solid #333;
        }

        .ipt-24 {
            width: 24em;
        }

        .ipt-18 {
            width: 18em;
        }

        .ipt-16 {
            width: 16em;
        }

        .ipt-12 {
            width: 12em;
        }

        .ipt-8 {
            width: 8em;
        }
    </style>
</head>

<body>
    <h1 style="text-align: center;">中交四航局第三工程有限公司<br>2021年智慧工地项目应用情况调研</h1>

    <p>根据《中交第四航务工程局有限公司智慧工地建设规划（2021-2025）》文件精神，统一和规范公司智慧工地建设，三公司要求各项目上报智慧工地系统应用情况，请认真、详细填写问卷问题。</p>

    <h2>1.项目概况及资金投入</h2>

    <div class="container">
        <div class="row mt-3">
            <div class="col-6"><label>项目名称：</label> <input class="ipt-text ipt-18" type="text"></div>
            <div class="col-6"><label>项目合同额：</label> <input class="ipt-text ipt-8" type="number">万元
            </div>
        </div>

        <div class="row mt-3">
            <div class="col-6"><label>项目性质：</label>
                <select name="" id="" class="ipt-text ipt-18">
                    <option value=""></option>
                    <option value="航务工程">航务工程</option>
                    <option value="海洋工程">海洋工程</option>
                    <option value="水利水电">水利水电</option>
                    <option value="市政工程">市政工程</option>
                    <option value="房屋建筑工程">房屋建筑工程</option>
                    <option value="港口及航运设施工程建筑">港口及航运设施工程建筑</option>
                    <option value="道路工程">道路工程</option>
                    <option value="铁路工程">铁路工程</option>
                    <option value="轨道交通工程">轨道交通工程</option>
                    <option value="桥梁工程">桥梁工程</option>
                    <option value="机场工程建筑">机场工程建筑</option>
                    <option value="其他">其他</option>
                </select>
            </div>
            <div class="col-6"><label>项目状态：</label>
                <select name="" id="" class="ipt-text ipt-18">
                    <option value=""></option>
                    <option value="待建">待建</option>
                    <option value="在建">在建</option>
                    <option value="停工">停工</option>
                    <option value="交工">交工</option>
                    <option value="竣工">竣工</option>
                </select>
            </div>
        </div>

        <div class="row mt-3">
            <div class="col-6"><label>智慧工地相关累计投入资金：</label> <input class="ipt-text ipt-8" type="number">万元
            </div>
            <div class="col-6"><label>2021年预计投入智慧工地：</label> <input class="ipt-text ipt-12" placeholder="含软硬件运维、人员培训"
                    type="number"> 万元</div>
        </div>
    </div>

    <!-- ==================== 工地网络 ==================== -->
    <h2>2.工地网络概况</h2>

    <div class="container">
        <div class="row">
            <div class="col-6">
                <label>项目用地包含以下区域：</label>
            </div>
        </div>
        <div class="modal fade" id="M2_1" tabindex="-1" aria-labelledby="ML2_1" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="ML2_1">添加用地区域</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mt-3"><label>区域名称：</label> <input class="ipt-text ipt-12" type="text">
                        </div>
                        <div class="mt-3"><label>区域面积：</label> <input class="ipt-text ipt-8" type="number">m<sup>2</sup>
                        </div>
                        <div class="mt-3"><label>手机网络信号：</label>
                            <select name="" id="" class="ipt-text ipt-12">
                                <option value=""></option>
                                <option value="覆盖且稳定">覆盖且稳定</option>
                                <option value="覆盖但不稳定">覆盖但不稳定</option>
                                <option value="局部且稳定">局部且稳定</option>
                                <option value="无信号">无信号</option>
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">完成</button>
                        <button type="button" class="btn btn-primary">添加</button>
                    </div>
                </div>
            </div>
        </div>

        <br>


        <div class=" table-responsive">
            <table class="table caption-top table-hover">
                <caption class="text-center"> 表 2.1 用地区域 </caption>
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>区域名</th>
                        <th>区域面积（m<sup>2</sup>）</th>
                        <th>手机网络信号</th>
                        <th></th>
                    </tr>
                    <tr class="fst-italic">
                        <td>例 1</td>
                        <td>办公区</td>
                        <td>2000</td>
                        <td>覆盖且稳定</td>
                        <td></td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="10" class="text-end"><button type="button" class="btn btn-sm btn-primary"
                                data-bs-toggle="modal" data-bs-target="#M2_1">添加区域</button></td>
                    </tr>
                </tfoot>
            </table>
        </div>

        <!-- ==================== 网络 ==================== -->

        <div class="row">
            <div class="col-6">
                <label>项目搭建了以下信息传输网络：</label>
            </div>
        </div>
        <div class="modal fade" id="M2_2" tabindex="-1" aria-labelledby="ML2_2" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="ML2_2">添加网络</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row mt-3">
                            <div class="col-3">
                                <label>网络类型：</label>
                            </div>
                            <div class="col-9">
                                <input class="ipt-text ipt-18" list="dtl2_1" placeholder="其他类型请输入">
                                <datalist id="dtl2_1">
                                    <option value="有线以太网">
                                    <option value="有线数字信号">
                                    <option value="无线WIFI">
                                    <option value="专用信号发射塔">
                                </datalist>
                            </div>
                        </div>

                        <div class="row mt-3">
                            <div class="col-3">
                                <label>稳定性：</label>
                            </div>
                            <div class="col-9">
                                <select name="" id="" class="ipt-text ipt-12">
                                    <option value=""></option>
                                    <option value="稳定">稳定</option>
                                    <option value="不稳定">不稳定</option>
                                    <option value="无法正常工作">无法正常工作</option>
                                </select>
                            </div>
                        </div>

                        <div class="row mt-3">
                            <div class="col-3">
                                <label>最大并发工作设备数：</label>
                            </div>
                            <div class="col-9">
                                <input class="ipt-text ipt-8" type="number">
                            </div>
                        </div>

                        <div class="row mt-3">
                            <div class="col-3">
                                <label>接入许可：</label>
                            </div>
                            <div class="col-9">
                                <select name="" id="" class="ipt-text ipt-12">
                                    <option value=""></option>
                                    <option value="不清楚">不清楚</option>
                                    <option value="无条件开放接入">无条件开放接入</option>
                                    <option value="无限制加密传输">无限制加密传输</option>
                                    <option value="人工允许接入">人工允许接入</option>
                                </select>
                            </div>
                        </div>

                        <div class="row mt-3">
                            <div class="col-3">
                                <label>网络类型：</label>
                            </div>
                            <div class="col-9">
                                <input class="ipt-text ipt-12" list="dtl2_2" placeholder="其他类型请输入">
                                <datalist id="dtl2_2">
                                    <option value="有线以太网">
                                    <option value="有线数字信号">
                                    <option value="无线WIFI">
                                    <option value="专用信号发射塔">
                                </datalist>
                            </div>
                        </div>

                        <div class="row mt-3">
                            <div class="col-3">
                                <label>服务提供商</label>
                            </div>
                            <div class="col-9">
                                <input class="ipt-text ipt-18" placeholder="可填“不清楚”" type="text">
                            </div>
                        </div>

                        <div class="row mt-3">
                            <div class="col-3">
                                <label>费用：</label>
                            </div>
                            <div class="col-9">
                                <input class="ipt-text ipt-18" list="dtl2_3" placeholder="其他类型请输入">
                                <datalist id="dtl2_3">
                                    <option value="一次性投入xxxx元">
                                    <option value="每年xxxx元">
                                    <option value="每月xxx元">
                                    <option value="不清楚">
                                </datalist>
                            </div>
                        </div>

                        <div class="row mt-3">
                            <div class="col-3">
                                <label>出资方：</label>
                            </div>
                            <div class="col-9">
                                <input class="ipt-text ipt-18" list="dtl2_4" placeholder="其他出资方请输入">
                                <datalist id="dtl2_4">
                                    <option value="项目部">
                                    <option value="业主单位">
                                    <option value="中交集团">
                                    <option value="四航局">
                                    <option value="三公司">
                                    <option value="不清楚">
                                </datalist>
                            </div>
                        </div>

                        <div class="row mt-3">
                            <div class="col-3">
                                <label>部署区域：</label>
                            </div>
                            <div class="col-9">
                                <input class="ipt-text ipt-18" type="text" placeholder="填入表 2.1 序号">
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">完成</button>
                        <button type="button" class="btn btn-primary">添加</button>
                    </div>
                </div>
            </div>
        </div>

        <br>

        <div class=" table-responsive">
            <table class="table caption-top table-hover">
                <caption class="text-center">
                    表 2.2 信息网络
                </caption>
                <thead>
                    <tr class="text-center">
                        <th>序号</th>
                        <th>网络类型</th>
                        <th>稳定性</th>
                        <th>并发工作设备数</th>
                        <th>接入许可</th>
                        <th>服务提供商</th>
                        <th>费用</th>
                        <th>出资方</th>
                        <th>部署区域<br> <span class="text-muted">见表 2.1 序号</span></th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="10" class="text-end"><button type="button" class="btn btn-sm btn-primary"
                                data-bs-toggle="modal" data-bs-target="#M2_2">添加网络</button></td>
                    </tr>

                </tfoot>
            </table>
        </div>
    </div>


    <!-- <main>
        <p>111</p>
        <p>222</p>
        <p>333</p>
    </main> -->

    <script>
        var u = navigator.userAgent;
        var bws = [
            {
                name: 'ie11',
                it: u.indexOf('Trident') > -1 && u.indexOf('rv:11.0') > -1
            }, {
                name: 'ie',
                it: u.indexOf('compatible') > -1 && u.indexOf('MSIE') > -1
            }
        ];
        for (var i = 0; i < bws.length; i++) {
            if (bws[i].it) {
                document.getElementById('IEBLOCK').style.display = 'block';
                document.getElementById('MAIN').style.display = 'none';
                alert('请用浏览器的极速模式或更换浏览器');
            }
        }
    </script>


    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.0.0-beta3/js/bootstrap.min.js"></script>
    <!-- <script src="https://cdn.staticfile.org/vue/3.0.11/vue.global.prod.js"></script> -->
    <!-- <script src="https://cdn.staticfile.org/bootstrap-vue/2.21.2/bootstrap-vue.min.js"></script> -->
    <script src="https://cdn.staticfile.org/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
    <script src="https://cdn.staticfile.org/jspdf/2.3.1/jspdf.umd.min.js"></script>



    <script>
        const MAIN = document.querySelector('main');
        const pdf = jspdf.jsPDF('', 'pt', 'a4');
        const addPage = (target) => html2canvas(target, {
            onrendered(canvas) {
                const contentWidth = canvas.width;
                const contentHeight = canvas.height;

                //一页pdf显示html页面生成的canvas高度;
                const pageHeight = contentWidth / 592.28 * 841.89;
                //未生成pdf的html页面高度
                const leftHeight = contentHeight;
                //页面偏移
                const position = 0;
                //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
                const imgWidth = 595.28;
                const imgHeight = 592.28 / contentWidth * contentHeight;

                const pageData = canvas.toDataURL('image/jpeg', 1.0);

                //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
                //当内容未超过pdf一页显示的范围，无需分页
                if (leftHeight < pageHeight) {
                    pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
                } else {
                    while (leftHeight > 0) {
                        pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                        leftHeight -= pageHeight;
                        position -= 841.89;
                        //避免添加空白页
                        if (leftHeight > 0) {
                            pdf.addPage();
                        }
                    }
                }
            }
        })

        const savePdf = () => {
            pdf.save("content.pdf");
        }

    </script>
</body>

</html>